<template>
  <view style="position: relative;overflow: hidden;">
	  <w-compress ref='wCompress' />
	  
      <l-painter
	  v-if="base"
      style="opacity: 0; position: absolute; top: -1000px;    right: 0;left: 0;margin: auto;F"
      isRenderImage
	  fileType="jpg"
      :board="base"
      @success="handleSuccess"/>
	  
    <!-- <img v-if="imgPath" :src="imgPath" alt="" style="width: 100px; height: 100px" /> -->
	<view v-if="imgPath!=''" :style="{'background-image': `url(${imgPath})`}"  class="zoomImage" @click="preview()">
	</view>
  </view>
</template>

<script>
import lPainter from "@/components/lime-painter/";
import WCompress from '@/components/w-compress/w-compress.vue'

export default {
  components: { lPainter,WCompress },
  props: {
	avatar: {
		type: String,
		default: ""
	},
    points: {
      type: Array,
      default: () => {
        return [];
      }
    },
  },
  data() {
    return {
      imgPath: "",
	  cs:"",
      base:undefined,
    };
  },
  methods: {
	preview(){
		uni.previewImage({
			indicator:"none",
			urls: [this.imgPath]
		});
	},
	handleSuccess(e) {
		this.base = undefined;
		//压缩后再上传
		this.$refs.wCompress.start(e, {
			pixels: 4000000,  // 最大分辨率，默认二百万
			quality: 0.6,     // 压缩质量，默认0.8
			type: 'jpg',      // 图片类型，默认jpg
			base64: true,     // 是否返回base64，默认false，非H5有效
		})
		.then(res => {
			//console.log(res);
			this.imgPath = res;
			uni.hideLoading();
			//uploadFile(res);
		})
		.catch(e => {
			this.imgPath = e;
			//uni.hideLoading();
		});
	},
  },
  created() {
	  
  },
  mounted() {
	if(location.host.lastIndexOf('localhost')>-1 && this.avatar.substring(0,4)=='http')
	{
		this.avatar = "../../static/test.jpg";
	}
	
	//uni.showLoading({title:"生成报告中..."});
	uni.getImageInfo({
	    src: this.avatar,
	    success: (res)=> {
			var views = [];
			views.push({
				type: 'image',
				src: res.path,
				css: {
					width: (res.width * 2) + "rpx",
					height: (res.height * 2) + "rpx",
				}
			});
		   
		   this.points.forEach((item) => {
				views.push({
					type: 'view',
					css: {
						left: item.left,
						top: item.top,
						width:  item.width,
						height: item.height,
						borderRadius: '50%',
						border: '8rpx border ' + item.color
					}
				});
			});
			
			this.base = {
			 	width: (res.width  * 2) + "rpx",
			 	height: (res.height  * 2) + "rpx",
			 	views: views
			}
	    }
	});
   }
};
</script>

<style lang="scss">
	.zoomImage{
		width:100px;
		height:0;
		padding-bottom: 100px;
		overflow:hidden;
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-background-size:cover;
		-moz-background-size:cover;
		background-size:cover;
	}
</style>